<template>
    <article id="housePrice-trend">
        <div class="public-header-content">
            <div class="header">
                <i></i>房价趋势
            </div>
            <div class="content clearfix">
                <h4>
                    <span>平均房屋价格{{ isNull0_USD(getCityIndexData.averageHousePrice) }}</span>
                    <span>平均价格年增长率 {{ isNull0(getCityIndexData.averageAnnualGrowthRate, '%') }}</span>
                    <span>市场存量年增长率 {{ isNull0(getCityIndexData.marketStockAnnualGrowthRate, '%') }}</span>
                    <span>月平均售价要价比 {{ isNull0(getCityIndexData.averageSellingPricePerMonth, '%') }}</span>
                </h4>
                <div class="echart-chart">
                    <div class="inside">
                        <header>房价趋势</header>
                        <div class="chartBox clearfix">
                            <div class="select-time clearfix">
                                <a-range-picker
                                        format="YYYY-MM-DD"
                                        :disabledDate="disabledDate"
                                        :ranges="DateRanges"
                                        :defaultValue="[$moment(btime), $moment(etime)]"
                                        @change="timeChange"
                                        style="width: 300px"/>
                            </div>
                            <div class="chart-div" id="housePrice-trend-chart" v-show="!chartNoDataShow" style="height: 300px;"></div>
                            <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</template>
<script>
    export default {
        data() {
            return {
                myEcharts: null, //图表
                btime: this.momentFormat(this.$moment().month(this.$moment().month() - 1).startOf('month').valueOf(), 'YYYY-MM-DD'), // 查询美元兑人民币-开始时间——上个月一号的00:00:00
                etime: this.momentFormat(this.$moment().month(this.$moment().month() - 1).endOf('month').valueOf(), 'YYYY-MM-DD'), // 查询美元兑人民币-结束时间——上个月最后一天的23:59:59
                DateRanges: null,//预设常用的日期范围以提高用户体验
                chartNoDataShow: false, //判断是否有无数据

            }
        },
        computed: {
            //从state获取城市指数数据
            getCityIndexData() {
                if(this.$store.getters.get_cityIndexData){
                    this.cityId = this.$store.getters.get_cityIndexData.cityId;
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_cityIndexData).length != 0){
                        // 获取房价走势数据
                        this.getHousePriceData();
                    }
                }
                return this.$store.getters.get_cityIndexData
            },

        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('housePrice-trend-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

            //预设常用的日期范围以提高用户体验
            let end = new Date();
            let oneWeekStart = new Date();
            let oneMonthStart = new Date();
            let threeMonthStart = new Date();
            oneWeekStart.setTime(oneWeekStart.getTime() - 3600 * 1000 * 24 * 7);//1周前
            oneMonthStart.setTime(oneMonthStart.getTime() - 3600 * 1000 * 24 * 30);//1月前
            threeMonthStart.setTime(threeMonthStart.getTime() - 3600 * 1000 * 24 * 90);//3月前
            this.DateRanges = {
                '1周前': [this.$moment(oneWeekStart), this.$moment(end)],
                '1月前': [this.$moment(oneMonthStart), this.$moment(end)],
                '3月前': [this.$moment(threeMonthStart), this.$moment(end)]
            };

        },
        methods: {
            // 选择日期——选项配置——只能选择今天之前的日期
            disabledDate(current) {
                return current && current > this.$moment().endOf('day');
            },
            //选择开始结束时间change事件
            timeChange(dates, dateStrings) {
                // console.log(dates, dateStrings)
                this.btime = dates.length > 0 ? this.momentFormat(dateStrings[0], 'YYYY-MM-DD') : '';
                this.etime = dates.length > 0 ? this.momentFormat(dateStrings[1], 'YYYY-MM-DD') : '';
                this.getHousePriceData();
            },
            // 获取房价趋势
            getHousePriceData(){
                this.$get(`/city/trend/${this.cityId}/1?btime=${this.btime}&etime=${this.etime}`).then(res => {
                    if (res.status == 0) {
                        this.chartNoDataShow = false;
                        this.housePriceTtrend_charts(res.data)
                    } else {
                        console.log(res.msg);
                        this.chartNoDataShow = true;
                    }
                });
            },
            //房价趋势——折线图
            housePriceTtrend_charts(data){
                this.myEcharts.hideLoading();
                let dateList = data.map(item => {
                    return this.momentFormat(item['time'], 'YYYY-MM-DD');
                });
                let sfrList = data.map(function (item) {
                    return item['sfr'];
                });
                let condoList = data.map(function (item) {
                    return item['condo'];
                });
                let markPoint = {
                    data: [
                        {type: 'max', name: '最大值',symbolSize:65},
                        {type: 'min', name: '最小值',symbolSize:65}
                    ],
                    label:{
                        normal:{
                            formatter:function(param){
                                let KM = '';
                                if(param.value.toString().length >= 7){
                                    KM = (param.value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(param.value/1000) +'k'
                                }
                                return '$'+ KM;
                            }
                        }
                    }
                };
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['独栋别墅', '公寓']
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter:function(value){
                                let KM = '';
                                if(value.toString().length >= 7){
                                    KM = (value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(value/1000) +'k'
                                }
                                return '$'+ KM;
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '独栋别墅',
                            type: 'line',
                            smooth: true,
                            data: sfrList,
                            markPoint: markPoint,
                        },
                        {
                            name: '公寓',
                            type: 'line',
                            smooth: true,
                            data: condoList,
                            markPoint: markPoint,
                        }
                    ],
                    color: ['#40c3f9', '#ffbf53'],

                });
            },

        },
        components: {}
    }
</script>
<style scoped lang="less" type="text/less">
    body{
        #housePrice-trend{
            .content{
                >h4{
                    text-align: center;
                    font-size: 16px;
                    color: #000;
                    padding: 15px 0;
                    >span{
                        margin: 0 15px;
                    }
                }
                >.echart-chart{
                    .inside{
                        >.chartBox {
                            > .select-time {
                                padding: 10px 0;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>